<template>
        <div class="digital-item-component">
            <div 
                v-if="isNumberString"
                class="box-item"
                :class="{'decimal-place-box-item': isDecimalPlace}"

            >

                <div class="number-text-container">
                    <template v-if="animation">
                        <div 
                            v-for="num in 10"
                            :key="num"
                            class="number-value"
                            :style="numberDynamicStyle"
                        >
                            {{ data  }}
                        </div>
                    </template>
                    <div class="number-value">{{ data }}</div>
                </div>
            </div>
            <div v-else class="comma-item">{{ data }}</div>
        </div>
</template>
    
<script setup lang='ts'>
import { computed } from 'vue';
interface Props {
    data: string | number;
    isDecimalPlace: boolean;
    animation: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    data: '0',
    isDecimalPlace: false,
    animation: true,
});

const isNumberString = computed(() => {
    const numberValue = Number(props.data);
    return !isNaN(numberValue);
});

const numberDynamicStyle = computed(() => {
    let numberValue = Number(props.data);
    if (isNaN(numberValue)) {
        numberValue = 0;
    }
    return {
        transform: `tanslate(0, -${numberValue * 100}%)`,
        translition: 'transform 1s ease-in-out',
    }
});


    
</script>
    
<style lang="scss">
    :root {
        --da-digital-item-width: 40px;
        --da-digital-item-height: 60px;
        --da-digital-item-font-size: 40px;

        --da-digital-item-decimal-place-width: 28px;
        --da-digital-item-decimal-place-height: 40px;
        --da-digital-item-decimal-place-font-size: 28px;

        --da-digital-item-bg-color: #409eff;
    }
</style>

<style lang="scss" scoped>
.digital-item-component {
    .box-item {
        width: var(--da-digital-item-width);
        height: var(--da-digital-item-height);
        font-size: var(--da-digital-item-font-size);
        font-weight: bold;
        line-height: 1;
        border-radius: 4px;
        color: '#fff';
        background-color: var(--da-digital-item-bg-color);
        position: relative;
        overflow: hidden;
        margin: 15px;

        .number-text-container {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            .number-value {
                flex: none;
                width: var(--da-digital-item-width);
                height: var(--da-digital-item-height);
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

   .comma-item {
        width: var(--da-digital-item-decimal-place-width);
        height: var(--da-digital-item-decimal-place-height);
        .number-text-container{
            .number-value {
                width: var(--da-digital-item-decimal-place-width);
                height: var(--da-digital-item-decimal-place-height);
                font-size: var(--da-digital-item-decimal-place-font-size);
            }

        }
    }

}

</style>